<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<input type="file" id="file">

<script>
    axios({
        method: 'POST',
        url: '/upload',
        data: 'name=黑马&age=18'
    })
    // 获取到文件
    let fileEle = document.getElementById('file');
    // 2、监听的onchange事件
    fileEle.addEventListener('change', (e) => {
        // 1、获取到文件
        const file = e.target.files[0]
        //     2、formData
        const fd = new FormData()
        fd.append('pic', file)

        // content-type: 'form/data'
        // content-type: json
        // content-type: www-form-urlencoded
        //
        axios({
            method: 'POST',
            url: '/upload',
            data: 'name=黑马&age=18'
        })
    })
</script>
</body>
</html>
